<template>
    <el-menu
        :default-openeds="defaultOpened"
        active-text-color="#4E93FF"
        :default-active="defaultActive"
        unique-opened
        :collapse="isCollapse"
        router
        class="inline_block inline_block_menu menu_style">
        <el-submenu v-for="menu in menus" :key="menu.url" :index="menu.url">
            <template slot="title" v-if="menu.url == '/sys'">
                <i class="iconfont icon-xitongguanli"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <template slot="title" v-if="menu.url == '/platform'">
                <i class="iconfont icon-pingtaiguanli"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <template slot="title" v-if="menu.url == '/account'">
                <i class="iconfont icon-zhanghuguanli"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <template slot="title" v-if="menu.url == '/trade'">
                <i class="iconfont icon-jiaoyiguanli"></i>
                <span slot="title">{{menu.name}}<MarkRemind :tipsNum="getHeaderMenuTips(menu.url)"></MarkRemind></span>
            </template>
            <template slot="title" v-if="menu.url == '/statisticsFind'">
                <i class="iconfont icon-tongjichaxun"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <template slot="title" v-if="menu.url == '/newNotice'">
                <i class="iconfont icon-xinwengonggao"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <template slot="title" v-if="menu.url == '/adminUpload'">
                <i class="iconfont icon-pingtaiguanli"></i>
                <span slot="title">{{menu.name}}</span>
            </template>
            <el-menu-item
                    v-for="sub_menu in menu.menuDtos"
                    :key="sub_menu.url"
                    :index="sub_menu.url">
                <i class="iconfont icon-dian"></i>
                {{sub_menu.name}}<MarkRemind :tipsNum="getTips(sub_menu)"></MarkRemind>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
    import MarkRemind from '@component/common/MarkRemind.vue';
    import { State } from 'vuex-class';

    @Component({
        components: {
            MarkRemind
        },
        computed: {
            ...mapState([
                'allTips',
                'reservateBillTips'
            ])
        },
        methods: {
            ...mapActions([
                'getAllTips',
                'getReservateBillTips'
            ])
        }
    })
    export default class Menu extends Vue {
        getTips (item) {
            switch (item.url){
                case '/platform/membercheck':  // 会员审核
                    return this.allTips.allMemberPendingTotalCount;
                case '/platform/billcheck':    // 票据审核
                    return this.allTips.billTotalCount;
                case '/platform/ordercheck':
                    return this.allTips.orderTotalCount;
                case '/trade/reservation':     // 当日预约出票小红点提醒
                    return this.reservateBillTips;
            }
        }
        getHeaderMenuTips (iten) {
            switch (iten) {
                case '/trade':
                    return this.reservateBillTips;
            }
        }
        @State menus!:Array<any>;
        isCollapse = false
        get defaultOpened() {
            return [this.$route.matched[0].path];
            // return [this.menus[0].url, this.menus[1].url];
        }
        get defaultActive() {
            return this.$route.path;
        }
        toggleCollapse() {
            this.isCollapse = !this.isCollapse
        }
        mounted() {
            this.getAllTips();
            this.getReservateBillTips();
        }
    }
</script>

<style lang="scss" scope>
    /*.el-menu-item .iconfont {*/
        /*font-size: 5px;*/
    /*}*/
    .collapse_btn {
        height: inherit;
        .el-icon-sort {
            transform: rotate(90deg);
        }
    }
    .menu_width {
        min-width: 200px;
        background-color: rgb(238, 241, 246)
    }
    .el-submenu__title {
        padding: 0 30px;
    }
    .el-submenu, .el-submenu:hover {
        background-color: $__color-border;
        color: $__color-show;
        font-size: .16rem;
        span{
            margin-left: 5px;
        }
        .el-submenu__title{
            i{
                color: $__color-show;
            }
        }
    }
    .menu_style {
        .el-submenu__title {
            height: 44px;
            line-height: 44px;
        }
    }
</style>